<template>
	<div class="menu-bar" :style="menuBarStyle">
		<div class="menu-bar-bg"></div>
		<div class="menu-buttons">
			<template v-for="(button, index) in buttons">
				<MenuButton 
					:key="button.id" 
					:icon="button.icon" 
					:active="button.active"
					:name="button.name"
					@click="onButtonClick(button, index)"></MenuButton>
			</template>
		</div>
	</div>
</template>
<script type="text/javascript">
import MenuButton from './menu-button.vue';
export default {
	name: "MenuBar",
	props: {
		buttons: {
			type: Array,
			default: []
		},
		zIndex: {
			type: Number,
			default: 1000
		}
	},
	computed: {
		menuBarStyle() {
			return {
				'z-index': this.zIndex
			}
		}
	},
	methods: {
		onButtonClick(button, index) {
			this.$emit("on-menu-click", button, index);
		}
	},
	components: {
		MenuButton
	}
}
</script>
<style type="text/css" scoped>
.menu-bar {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

.menu-bar-bg {
    position: relative;
    border-bottom: 50px solid hsla(0, 0%, 100%, .5);
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

.menu-buttons {
    position: absolute;
    padding-left: 30px;
    padding-right: 30px;
    height: 100px;
    overflow-y: hidden;
    bottom: 0;
}
</style>